<template>
  <div class="common-page">
    <div class="f-r a-c" style="margin-bottom: 33px">
      <div class="alarm-item f-r j-b">
        <div class="left">
          <div class="alarm-name">当前超期服务总数</div>
          <div class="alarm-value alarm-value2">
            <span>{{ overdueNum }}</span>
            <span class="alarm-unit">个</span>
          </div>
        </div>
        <div class="alarm-img alarm-img2">
          <img src="@/assets/alarm_icon2.png"/>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="精准帮办" name="Accurates"></el-tab-pane>
      <el-tab-pane label="计划变更" name="Plan"></el-tab-pane>
      <el-tab-pane label="外线联报" name="LinePage"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" style="position: initial"></component>
  </div>
</template>

<script>
import LinePage from '@/views/assistant/accurates/line/alarm'
import Plan from '@/views/assistant/accurates/plan/alarm'
import Accurates from '@/views/assistant/accurates/accurates/alarm'
import { http_alarm } from '@/api'
export default {
  name: 'page4',
  components: {
    LinePage,
    Plan,
    Accurates
  },
  data() {
    return {
      overdueNum: '',
      activeName: 'Accurates',
    }
  },
  created() {
    http_alarm.serve_count().then(res => {
      this.overdueNum = res.data.overdueNum
    })
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.alarm-item {
  margin-right: 41px;
  width: 262px;
  height: 109px;
  background: #FFFFFF;
  box-shadow: 6px 6px 54px 1px rgba(0,0,0,0.05);
  border-radius: 14px 14px 14px 14px;
  opacity: 1;
  padding: 18px 16px;
  .alarm-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .alarm-img1 {
    background-color: rgba(255, 218, 155, .21);
  }
  .alarm-img2 {
    background-color: rgba(255, 128, 128, .21);
  }
  .alarm-name {
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #202224;
    margin-bottom: 20px;
  }
  .alarm-value {
    font-size: 36px;
    line-height: 36px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #FEA917;
    .alarm-unit {
      font-size: 16px;
    }
  }
  .alarm-value1 {
    color: #FEA917;
  }
  .alarm-value2 {
    color: #D81E06;
  }
}
.tag {
  width: 223px;
  height: 56px;
  font-size: 12px;
  line-height: 16px;
  padding: 12px;
  border-radius: 12px;
}
.tag0 {
  background: #F1F5FF;
  border: 1px solid #4880FF;
  color: #4880FF;
}
.tag1 {
  background: #fceed7;
  border: 1px solid #FEA917;
  color: #FEA917;
}
.tag2 {
  border: 1px solid #F23232;
  background: #FFDBDB;
  color: #F51111;
}
</style>
